/*******************************************************************************
 * Copyright (c) 2012-2017 Codenvy, S.A.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *   Codenvy, S.A. - initial API and implementation
 *******************************************************************************/
@eval notificationPopupSuccessBackground org.eclipse.che.ide.api.theme.Style.theme.notificationPopupSuccessBackground();
@eval notificationPopupFailBackground org.eclipse.che.ide.api.theme.Style.theme.notificationPopupFailBackground();
@eval notificationPopupProgressBackground org.eclipse.che.ide.api.theme.Style.theme.notificationPopupProgressBackground();
@eval notificationPopupWarningBackground org.eclipse.che.ide.api.theme.Style.theme.notificationPopupWarningBackground();
@eval notificationPopupPanelShadow org.eclipse.che.ide.api.theme.Style.theme.notificationPopupPanelShadow();
@eval notificationPopupIconSuccessFill org.eclipse.che.ide.api.theme.Style.theme.notificationPopupIconSuccessFill();
@eval notificationPopupIconFailFill org.eclipse.che.ide.api.theme.Style.theme.notificationPopupIconFailFill();
@eval notificationPopupIconProgressFill org.eclipse.che.ide.api.theme.Style.theme.notificationPopupIconProgressFill();
@eval notificationPopupIconWarningFill org.eclipse.che.ide.api.theme.Style.theme.notificationPopupIconWarningFill();
@eval notificationPopupIconSvgFill org.eclipse.che.ide.api.theme.Style.theme.notificationPopupIconSvgFill();
@eval notificationPopupTextColor org.eclipse.che.ide.api.theme.Style.theme.notificationPopupTextColor();
@eval closeNotificationButtonColor org.eclipse.che.ide.api.theme.Style.theme.closeNotificationButtonColor();
@eval closeNotificationHoveredButtonColor org.eclipse.che.ide.api.theme.Style.theme.closeNotificationHoveredButtonColor();

.notificationPanel {
    cursor: pointer;
}

.notificationPanelContainer {
    width: 100%;
    border-spacing: 0px;
}

.notification {
    border-bottom: 1px solid tabBorderColor;
    padding-top: 4px;
    margin-top: -1px;
}

.notificationIconWrapper {
    display: inline-block;
    width: 16px;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 10px;
}

.notificationIconWrapper svg {
    width: 16px;
    height: 16px;
}

.notificationIconWrapper svg[name="fail"] {
    fill: notificationPopupIconFailFill;
}

.notificationIconWrapper svg[name="success"] {
    fill: notificationPopupIconSuccessFill;
}

.notificationIconWrapper svg[name="progress"] {
    fill: notificationPopupIconProgressFill;
}

.notificationIconWrapper svg[name="warning"] {
    fill: notificationPopupIconWarningFill;
}

.notificationContentWrapper{
    display: inline-block;
    width: literal("calc(100% - 75px)");
    overflow: hidden;
}

.notificationTitleWrapper {
}

.notificationTitleWrapper > div {
    font-family: mainFontFamily;
    font-weight: bold;
    color: mainFontColor;
    white-space: pre-wrap;
    margin-bottom: 0;
    margin-top: 1px;
    display: inline-block;
}

.notificationMessageWrapper {
    overflow: hidden;
}

.notificationMessageWrapper > div {
    margin-bottom: 4px;
}

.notificationTitleWrapper::after {
    content: attr(info);
    color: #aaaaaa;
    font-size: 10px;
    font-family: "Open Sans", sans-serif;
    left: 20px;
    margin-left: 5px;
    opacity: 0;
    -webkit-transition: all 0.5s cubic-bezier(0, .05, 0, 1);
}

.notificationTitleWrapper:hover:after {
    opacity: 0.5;
}

.notificationCloseButtonWrapper {
    display: inline-block;
    float: right;
    padding: 0px 7px 0px 7px;
    vertical-align: top;
    cursor: pointer;
}

.notificationCloseButtonWrapper svg g {
    fill: closeNotificationButtonColor;

    -webkit-transition: color 0.1s ease-in-out,
                        fill 0.1s ease-in-out,
                        stroke 0.1s ease-in-out;
    transition: color 0.1s ease-in-out,
                fill 0.1s ease-in-out,
                stroke 0.1s ease-in-out;
}

.notificationCloseButtonWrapper svg:hover g {
    fill: closeNotificationHoveredButtonColor;
}

.notificationStatusProgress {
    background-color: notificationPopupProgressBackground;
}

.notificationStatusWarning {
    background-color: notificationPopupWarningBackground;
}

.notificationStatusSuccess {
    background-color: notificationPopupSuccessBackground;
}

.notificationStatusFail {
    background-color: notificationPopupFailBackground;
}

.notificationPopupPlaceholder {
    position: absolute;
    right: 10px;
    top: 65px;
    z-index: 1;
    width: 400px;
    vertical-align: top;
}

.notificationPopupPanel {
    border-radius: 5px;
    box-shadow: notificationPopupPanelShadow;
    margin-bottom: 10px;
    overflow: hidden;
    opacity: 0;
}

.notificationPopup {
    width: 400px;
    margin: 10px;
}

.notificationPopupContentWrapper {
    display: inline-block;
    max-width: 315px;
    vertical-align: middle;
}

.notificationPopupIconWrapper {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    margin-bottom: -4px;
    margin-left: 5px;
    padding-top: 0px;
}

.notificationPopupIconWrapper > svg > g,
.notificationPopupIconWrapper > svg > rect,
.notificationPopupIconWrapper > svg > path {
    fill: notificationPopupIconSvgFill;
}

.notificationPopupCloseButtonWrapper {
    display: inline-block;
    vertical-align: top;
    float: right;
    margin: -10px 17px 0 0;
    cursor: pointer;
}

.notificationPopupCloseButtonWrapper > svg > g {
    fill: closeNotificationButtonColor;

    -webkit-transition: color 0.1s ease-in-out,
    fill 0.1s ease-in-out,
    stroke 0.1s ease-in-out;
    transition: color 0.1s ease-in-out,
    fill 0.1s ease-in-out,
    stroke 0.1s ease-in-out;
}

.notificationPopupCloseButtonWrapper > svg:hover > g {
    fill: closeNotificationHoveredButtonColor;
}

.notificationPopupTitleWrapper {
    margin: 0;
}

.notificationPopupTitleWrapper > div {
    margin-bottom: 0px;
    font-size: 13px;
    font-family: mainFontFamily;
    font-weight: bold;
    color: notificationPopupTextColor;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.notificationPopupMessageWrapper {
    margin-bottom: 0;
}

.notificationPopupMessageWrapper > div {
    color: notificationPopupTextColor;
    margin: 0;
}

.notificationShowingAnimation {
    -webkit-animation: showing 0.2s ease-in-out;
    opacity: 1;
}

@-webkit-keyframes showing {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
        opacity: 0.5;
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

@keyframes showing {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
        opacity: 0.5;
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

.notificationHidingAnimation {
    -webkit-animation: hiding 0.5s ease-in-out;
}

@-webkit-keyframes hiding {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes hiding {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
